<template>
  <div>
    <headline :headline="goodsInfo.channelName" />
    <el-form ref="ruleForm" class="form" :model="goodsInfo" label-width="150px" size="mini" label-position="left">
      <el-row :gutter="20">
        <el-col :span="12" :xl="8">
          <el-form-item label="平台分类" prop="goodsInfo" :rules="[{ required: true, validator: validCategory, trigger: 'blur' }]">
            <el-cascader
              ref="channelCategory"
              v-model="goodsInfo.categoryIdList"
              class="marginRight"
              :props="{ children: 'children', label: 'categoryName', expandTrigger: 'hover', value: 'categoryId' }"
              :options="channelOptions"
              separator=">"
              :disabled="isDisabled"
              filterable
              clearable
              :collapse-tags="!isDisabled"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xl="8">
          <el-form-item label="店铺分类" prop="goodsInfo" :rules="[{ required: true, validator: validResourceId, trigger: 'blur' }]">
            <el-cascader
              ref="storeCategory"
              v-model="goodsInfo.storeCategoryIdList"
              class="marginRight"
              :props="{ children: 'children', label: 'categoryName', expandTrigger: 'hover', value: 'categoryId', multiple: true }"
              :options="categoryOptions"
              separator=">"
              :disabled="isDisabled"
              filterable
              clearable
              :collapse-tags="!isDisabled"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" :xl="8">
          <el-form-item label="品牌名称" prop="channelBrandName" :rules="[{ required: true, validator: validBrandId, trigger: 'blur' }]">
            <BrandName
              ref="channelBrandName"
              v-model="goodsInfo.channelBrandName"
              class="marginRight"
              :disabled="isDisabled"
              :channel-id="channelId"
              :type="'all'"
              style="width: 100%"
              @change="brandChange"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <channelAttribute :commodity-attribute="goodsInfo" key-name="channelAttributeList" :gutter="20" :is-disabled="isDisabled" />
    </el-form>
  </div>
</template>

<script>
import headline from '@/views/coi/components/headline.vue'
import BrandName from '@/views/coi/components/BrandName.vue'
import channelAttribute from '@/views/coi/components/channelAttribute'
import { queryChannelBrandList } from '@/api/coi/mapping/brand'
import { queryTreeList, queryChannelTreeList } from '@/api/coi/onlineTaskAPI/sku'
export default {
  components: {
    headline,
    BrandName,
    channelAttribute
  },
  props: {
    goodsInfo: {
      type: Object,
      required: true
    },
    isDisabled: {
      type: Boolean,
      default: true
    },
    channelId: {
      type: String,
      default: '12'
    }
  },
  data() {
    return {
      categoryOptions: [],
      channelOptions: [],
      queryChannelBrandList
    }
  },
  computed: {
    validBrandId() {
      const fun = (rule, value, callback) => {
        if (!this.goodsInfo.channelBrandId) callback(new Error('品牌名称不能为空'))
        else callback()
      }
      return fun
    },
    validCategory() {
      const fun = (rule, value, callback) => {
        if (!this.goodsInfo.categoryIdList) callback(new Error('平台分类不能为空'))
        else callback()
      }
      return fun
    },
    validResourceId() {
      const fun = (rule, value, callback) => {
        if (!this.goodsInfo.storeCategoryIdList) callback(new Error('店铺分类不能为空'))
        else callback()
      }
      return fun
    }
  },
  watch: {
    goodsInfo: {
      handler(newValue, oldValue) {
        if (!newValue.channelBrandName || newValue.channelBrandName === null) this.goodsInfo.channelBrandName = ''
        if (!newValue.channelBrandId || newValue.channelBrandId === null) this.goodsInfo.channelBrandId = ''
        this.getTreeList()
        this.getChannelTreeList()
      },
      immediate: true
    }
  },
  methods: {
    async getTreeList() {
      const data = { channelId: '14' }
      const { result } = await queryTreeList(data)
      this.categoryOptions = result || []
    },
    async getChannelTreeList() {
      const data = { channelId: this.channelId }
      const { result } = await queryChannelTreeList(data)
      this.channelOptions = result || []
    },
    brandChange(val) {
      this.goodsInfo.channelBrandId = val.value
      this.goodsInfo.channelBrandName = val.label
    },
    submitForm() {
      let flag = null
      this.$refs.ruleForm.validate((valid) => {
        flag = valid
      })
      return flag
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  margin: 0 10px;
  margin-top: 20px;
}
/deep/ .el-form-item__content {
  display: flex;
  align-items: center;
}
.marginRight {
  margin-right: 25px;
}
</style>
